<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .ui-datatable .ui-datatable-header {
                text-align: right !important;
            }

            .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-chkbox {
                display: none;
            }
        </style>
    </ui:define>

    <ui:define name="title">
        DataTable - <span class="subitem">Table State</span> <span class="blue">- since v6.0.10</span>
    </ui:define>

    <ui:define name="description">
        TableState feature enables DataTable to maintain its state across pages by setting multiViewState attribute to true. In this demo,
        manipulate table with pagination, sorting, filtering and selection, then visit another page and then come back to this page. DataTable
        state should remain as you've left it.
    </ui:define>

    <ui:param name="documentationLink" value="/components/datatable" />

    <ui:define name="implementation">

        <h:form id="form">
            <p:messages id="messages" />

            <p:dataTable id="tableStateDT" var="car" value="#{dtTableStateView.cars}" widgetVar="carsTable" multiViewState="true"
                         rows="10" paginator="true"
                         paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,15"
                         selectionMode="single" selection="#{dtTableStateView.selectedCar}" rowKey="#{car.id}"
                         emptyMessage="No cars found with given criteria" filteredValue="#{dtTableStateView.filteredCars}">

                <f:facet name="header">
                    <p:outputPanel>
                        <h:outputText value="Search all fields:" />
                        <p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" style="width:150px" placeholder="Enter keyword"/>
                    </p:outputPanel>
                </f:facet>

                <p:ajax event="rowSelect" update=":form:carDetail" oncomplete="PF('carDialog').show()" />

                <p:column headerText="Id" filterBy="#{car.id}" sortBy="#{car.id}" filterMatchMode="contains">
                    <h:outputText value="#{car.id}" />
                </p:column>

                <p:column headerText="Year" filterBy="#{car.year}" sortBy="#{car.year}" filterMatchMode="startsWith">
                    <h:outputText value="#{car.year}" />
                </p:column>

                <p:column headerText="Brand" filterBy="#{car.brand}" sortBy="#{car.brand}" filterMatchMode="exact">
                    <f:facet name="filter">
                        <p:selectOneMenu onchange="PF('carsTable').filter()" style="width:100%; box-sizing: border-box;" >
                            <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
                            <f:selectItems value="#{dtTableStateView.brands}" />
                        </p:selectOneMenu>
                    </f:facet>
                    <h:outputText value="#{car.brand}" />
                </p:column>

                <p:column headerText="Color" filterBy="#{car.color}" sortBy="#{car.color}" filterMatchMode="in">
                    <f:facet name="filter">
                        <p:selectCheckboxMenu label="Colors" onchange="PF('carsTable').filter()" style="width:100%; box-sizing: border-box;" scrollHeight="150">
                            <f:selectItems value="#{dtTableStateView.colors}" />
                        </p:selectCheckboxMenu>
                    </f:facet>
                    <h:outputText value="#{car.color}" />
                </p:column>

                <f:facet name="paginatorTopLeft">
                    <p:commandButton value="Clear table state" action="#{dtTableStateView.clearTableState}" update="@form"/>
                </f:facet>
            </p:dataTable>

            <br />
            with LazyDataModel:
            <p:dataTable var="car" value="#{dtLazyView.lazyModel}" paginator="true" rows="10"
                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                         rowsPerPageTemplate="5,10,15" id="carTable" lazy="true" multiViewState="true">
                <p:column headerText="Id" sortBy="#{car.id}" filterBy="#{car.id}">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" sortBy="#{car.year}" filterBy="#{car.year}">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" sortBy="#{car.brand}" filterBy="#{car.brand}">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" sortBy="#{car.color}" filterBy="#{car.color}">
                    <h:outputText value="#{car.color}" />
                </p:column>

                <f:facet name="paginatorTopLeft">
                    <p:commandButton value="Clear table state" action="#{dtTableStateView.clearTableState}" update="@form"/>
                </f:facet>
            </p:dataTable>

            <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                <p:outputPanel id="carDetail" style="text-align:center;">
                    <p:panelGrid  columns="2" rendered="#{not empty dtTableStateView.selectedCar}" columnClasses="label,value">
                        <f:facet name="header">
                            <p:graphicImage name="demo/images/car/#{dtTableStateView.selectedCar.brand}-big.gif"/>
                        </f:facet>

                        <h:outputText value="Id:" />
                        <h:outputText value="#{dtTableStateView.selectedCar.id}" />

                        <h:outputText value="Year" />
                        <h:outputText value="#{dtTableStateView.selectedCar.year}" />

                        <h:outputText value="Brand" />
                        <h:outputText value="#{dtTableStateView.selectedCar.brand}" />

                        <h:outputText value="Color:" />
                        <h:outputText value="#{dtTableStateView.selectedCar.color}" style="color:#{dtTableStateView.selectedCar.color}"/>
                    </p:panelGrid>
                </p:outputPanel>
            </p:dialog>

        </h:form>

    </ui:define>

</ui:composition>